<template>
    <div class="content box-mt">
        
        <div class="product-box1 clearfix">
            <a class="product-box1-left"  data-href="/detail/1" @click="gohref('/detail/1')">
                <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d692a30ee3d586c4274575eec255d3c5.jpg?f=webp&w=537&h=762&bg=C1DDE9" lazy="loaded"/>
            </a>
            <div class="product-box1-right">
                <div class="product-box1-right-item">
                    <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/827a686678f39b1bbdc99c6e6b6a13c8.jpg?f=webp&w=537&h=378&bg=DAECFA" lazy="loaded">
                </div>
               <div class="product-box1-right-item">
                    <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/267e988a99b5cf4e960747e8aa5fa831.jpg?f=webp&w=537&h=378&bg=EDFBFC" lazy="loaded">
               </div>
            </div>
        </div>

        <div class="product-box2 box-mt">
            <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189acdf7e9b807cfc22d394df87c1958.jpg?f=webp&w=1080&h=420&bg=FEFEFE" lazy="loaded">
        </div>

        <div class="product-box3 box-mt">
            <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0c08e3519b4c98ae53734a405143ffee.jpg?f=webp&w=1080&h=660&bg=FFFFFF" lazy="loaded">
        </div>

        <div class="flex-sa box-mt">
            <div class="product-box4-item">
                <div class="product-box4-item-img">
                    <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f90791bccff62ad03a0476156e7bb16d.jpg?thumb=1&w=344&h=280" lazy="loaded">
                </div>
                <div class="product-box4-item-content">
                    <p class="name">小米10 Pro</p>
                    <p class="smallgraytext">晓龙865 / 50倍变焦</p>
                    <p><span class="price">4999</span> <span class="smallgraytext">起</span> <del class="smallgraytext">3999</del></p>
                    <div class="buy-btn">立即购买</div>
                </div>
            </div>
            <div class="product-box4-item">
                <div class="product-box4-item-img">
                    <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64a04d4f67a23c2d8643aaba52e2392b.jpg?thumb=1&w=344&h=280" lazy="loaded">
                </div>
                <div class="product-box4-item-content">
                    <p class="name">小米10 Pro</p>
                    <p class="smallgraytext">晓龙865 / 50倍变焦</p>
                    <p><span class="price">4999</span> <span class="smallgraytext">起</span> <del class="smallgraytext">3999</del></p>
                    <div class="buy-btn">立即购买</div>
                </div>
            </div>
            <div class="product-box4-item">
                <div class="product-box4-item-img">
                    <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9b3b7c52bffab0806c54652ee0872a64.jpg?thumb=1&w=344&h=280" lazy="loaded">
                </div>
                <div class="product-box4-item-content">
                    <p class="name">小米10 Pro</p>
                    <p class="smallgraytext">晓龙865 / 50倍变焦</p>
                    <p><span class="price">4999</span> <span class="smallgraytext">起</span> <del class="smallgraytext">3999</del></p>
                    <div class="buy-btn">立即购买</div>
                </div>
            </div>

            <div class="product-box4-item">
                <div class="product-box4-item-img">
                    <img class="full" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/53e729d30746033a042d8ae9399553a7.jpg?thumb=1&w=344&h=280" lazy="loaded">
                </div>
                <div class="product-box4-item-content">
                    <p class="name">小米10 Pro</p>
                    <p class="smallgraytext">晓龙865 / 50倍变焦</p>
                    <p><span class="price">4999</span> <span class="smallgraytext">起</span> <del class="smallgraytext">3999</del></p>
                    <div class="buy-btn">立即购买</div>
                </div>
            </div>

        </div>
        
        <div class="graybg box-mt">
            <div class="product-intellect-box">
                <div class="product-intellect-item">
                    <img class="full" data-src="https://i8.mifile.cn/v1/a1/46c44f3e-479d-a999-dd2d-98fb39b51e17.webp?w=537&h=720&bg=C0A491" lazy="loaded">
                </div>
                <div class="product-intellect-item">
                    <img class="full" data-src="https://i8.mifile.cn/v1/a1/b79cb907-3ae4-2a35-6756-b243b386a95a.webp?w=537&h=720&bg=E8CFCB" lazy="loaded">
                </div>
            </div>

            <div class="product-intellect-box">
                <div class="product-intellect-item">
                    <img class="full" data-src="https://i8.mifile.cn/v1/a1/b883172b-5aa3-7855-678f-c615109ee0a7.webp?w=537&h=720&bg=878F9B" lazy="loaded">
                </div>
                <div class="product-intellect-item">
                    <img class="full" data-src="https://i8.mifile.cn/v1/a1/8cfcd654-4af5-9ae6-c6cc-1ba9d28be8e8.webp?w=537&h=720&bg=9BB5C4" lazy="loaded">
                </div>
            </div>

            <div class="product-intellect-box">
                <div class="product-intellect-item">
                    <img class="full" data-src="https://i8.mifile.cn/v1/a1/ad91499a-59ab-adc3-8fd5-98aefc1c43b4.webp?w=537&h=720&bg=B5C5BE" lazy="loaded">
                </div>
                <div class="product-intellect-item">
                    <img class="full" data-src="https://i8.mifile.cn/v1/a1/52866372-7fe5-76c2-29a0-9ae32d07b8ff.webp?w=537&h=720&bg=D9D8C3" lazy="loaded">
                </div>
            </div>
            
            <div class="kown-more box-mt">
                了解小米
                <span class="iconfont">&#xe611;</span>
            </div>

        </div>
    </div>
</template>

<script>

import Lazyloader from '@/utils/lazyloader'
import InfiniteScroll from '@/utils/infinitescroll'
export default {
    name: 'Content',
    data() {
        return {
            infooter:0,
        }
    },
    mounted() {
        console.log('recommend Content mounted');
        new Lazyloader({el:'img[lazy="loaded"]',advance:300});
        new InfiniteScroll({
            root:'.home-main',  
            /*设置根元素为外层容器home-main，这样rootMargin才能生效，因为home-main设置了overflow*/
            el:'.kown-more',
        },()=>{}); 
        
    },
    methods:{
        gohref(url) {
            this.$router.push(url);
        }
    }
}
</script>

<style lang="stylus">

@import '../../../assets/css/theme.styl';

.content
    background #fff;
    margin-bottom 62px;
.product-box2
    width:100%;
    height:161px;
.product-box3
    width:100%;
    height:253px;

.product-box1
    width:100%;
    height 292.1px;
    .product-box1-left
        display inline-block;
        width 205.85px;
        height 292.1px;
        float left
    .product-box1-right
        width 205.85px;
        height 292.1px;
        float right
        .product-box1-right-item
            width:100%;
            height 144.9px;
            margin-bottom 2px;

.product-box4-item
    width:197.8px;
    margin-bottom 8px;
    .product-box4-item-img
        width 100%;
        height 161px;
    .product-box4-item-content
        line-height:1.5;
        margin auto;
        padding 11.5px 15.525px;
        background: #fff;
        .name
            font-size:16px;
            color rgba(0,0,0,.87);
        .price
            font-size:16px;
            color #ea625b;

.graybg
    width:100%;
    background $bgcolor;
    .product-intellect-box
        width:100%;
        display flex;
        justify-content:space-between;
        align-items:center
        .product-intellect-item
            width:206px;
            height 276px;
    .kown-more
        width:100%;
        height 52px;
        background #fff;
        line-height 52px;
        text-align center;
        position relative
        font-size 20px;
        color #bbb;
        .iconfont
            position:absolute;
            top 0;
            right 20px;
            font-size 24px;
            transform rotate(90deg)

</style>